Mobile Development with Ionic and React — Pull to Refresh and Reorderable List

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Pull to Refresh

We can add the IonRefresher component to add pull to refresh functionality on a content component.

For example, we can write:

import React from 'react';
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
import './Tab1.css';
import { RefresherEventDetail } from '@ionic/core';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('begin');

  setTimeout(() => {
    console.log('end');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
        <IonRefresherContent
          pullingIcon={chevronDownCircleOutline}
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing...">
        </IonRefresherContent>
      </IonRefresher>
    </IonContent>
  );
};

export default Tab1;

We add the IonRefresher component with the refresher component.

The IonRefreshContent component lets us add the content for the refresh loading indicator.

pullingText has the text that’s displayed when we pull to refresh.

refreshingSpinner lets sets the name of the spinner to show.

refreshingText shows the text when the loading indicator is showing.

The onIonRefresh prop takes a function that controls when the loading indicator is shown.

The event.detail.complete method lets us stop displaying the refresh indicator.

Reorderable List

We can add a reorderable list with the IonReorderGroup component.

For example, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup } from '[@ionic/react](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Freact "Twitter profile for @ionic/react")';
import './Tab1.css';
import { RefresherEventDetail } from '[@ionic/core](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Fcore "Twitter profile for @ionic/core")';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('begin');

setTimeout(() => {
    console.log('end');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonReorderGroup disabled={false}>
        <IonItem>
          <IonLabel>Item 1</IonLabel>
          <IonReorder slot="end" />
        </IonItem>
        <IonItem>
          <IonLabel>Item 2</IonLabel>
          <IonReorder slot="end" />
        </IonItem>
        <IonItem>
          <IonReorder slot="start" />
          <IonLabel>Item 3</IonLabel>
        </IonItem>
      </IonReorderGroup>
    </IonContent>
  );
};

export default Tab1;

We add IonItem s into the IonReorderGroup to add the reorderable items.

The IonReorder component lets us reorder the item when it’s wrapped around the item.

Also, we can wrap IonReorder around the IonItem .

We can drag the handles to reorder the items.

For instance, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup } from '@ionic/react';
import './Tab1.css';
import { RefresherEventDetail } from '@ionic/core';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('begin');

setTimeout(() => {
    console.log('end');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonReorderGroup disabled={false}>
        <IonReorder>
          <IonItem>
            <IonLabel>Item 1</IonLabel>
          </IonItem>
        </IonReorder>
        <IonReorder>
          <IonItem>
            <IonLabel>Item 2</IonLabel>
          </IonItem>
        </IonReorder>
      </IonReorderGroup>
    </IonContent>
  );
};

export default Tab1;

to do that. And now we can drag anywhere in the item to reorder the items.

Conclusion

We can add reorderable items and pull to refresh with Ionic React.